<template>
	<view>
		<!-- 导航 -->
		<uni-nav-bar :border="false" :statusBar="true" :fixed="true"  @clickRight="openEdit">
			<view class="flex w-100 justify-center align-center font-weight-bold">
				<view class="mx-2" v-for="(item,index) in tabBars" :key="index"
					:class="tabIndex === index ? 'text-main':''" @click="changeTap(index)">{{item.name}}</view>
			</view>
			<view slot="right">
				<text class="iconfont icon-pinglun text-light-blue"></text>
			</view>
		</uni-nav-bar>

		<!-- 内容部分 -->
		<swiper :current="tabIndex" @change="swipper" :duration="150" :style="'height:'+scrollH+'px'">
			<!-- 推荐 -->
			<swiper-item>
				<scroll-view @scrolltolower="moreLoadEvent" scroll-y="true" :style="'height:'+scrollH+'px'">
					<!-- 引入列表 -->
					<block v-for="(item,index) in list" :key="index">
						<common-list :item="item" :index="index" @doSupport="doSupport"></common-list>
						<!-- 分割线 -->
						<divider></divider>
					</block>
					<load-more :moreLoad="moreLoad"></load-more>
				</scroll-view>
			</swiper-item>

			<!-- 关注 -->
			<swiper-item>
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px'">
					<!-- 热门分类组件 -->
					<hot-cate :hotCate="hotCate"></hot-cate>
					<!-- 搜索框 -->
					<view class="p-2">
						<view class="bg-light rounded border flex align-center justify-center py-2">
							<i class="iconfont icon-sousuo pr-2"></i>搜索话题
						</view>
					</view>

					<!-- 轮播图 -->
					<swiper class="px-2 pb-2 rounded" :indicator-dots="true" :autoplay="true" :interval="3000"
						:duration="1000">
						<swiper-item v-for="i in 3" :key="i">
							<image src="@/static/demo/banner3.jpg" style="height: 300rpx;" class="w-100 rounded">
							</image>
						</swiper-item>
					</swiper>
					<divider></divider>

					<!-- 最近更新 -->
					<view class="p-2 font-md">最近更新</view>
					<!-- 话题列表组件 -->
					<block v-for="(item,index) in topicList" :key="index">
						<topic-list :item="item" :index="index"></topic-list>
					</block>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	// 引入自定义导航栏
	import uniNavBar from '@/uni-ui/uni-nav-bar/uni-nav-bar.vue'
	// 引入列表
	import commonList from '@/components/common/common-list.vue'
	// 引入加载更多
	import loadMore from '@/components/common/load-more.vue'
	// 引入热门分类
	import hotCate from '@/components/news/hot-cate.vue'
	//引入话题列表
	import topicList from '@/components/news/topic-list.vue'

	const demo = [{
			username: '昵称', //用户名
			userpic: '/static/logo.png', //用户头像
			newstime: '2021-6-4 15:30', //更新时间
			isFllow: true, //关注
			title: '我是标题', //标题
			titlepic: '', //封面
			//点赞和踩
			support: {
				type: 'support', //点赞类型
				support_count: 1, //点赞人数
				unsupport_count: 2 //踩的人数
			},
			comment_count: 0, //评论
			share_num: 0 //分享
		},
		{
			username: '昵称', //用户名
			userpic: '/static/logo.png', //用户头像
			newstime: '2021-6-4 15:30', //更新时间
			isFllow: true, //关注
			title: '我是标题', //标题
			titlepic: '/static/logo.png', //封面
			//点赞和踩
			support: {
				type: 'unsupport', //点赞类型
				support_count: 1, //点赞人数
				unsupport_count: 2 //踩的人数
			},
			comment_count: 2, //评论
			share_num: 2 //分享
		},
		{
			username: '昵称', //用户名
			userpic: '/static/logo.png', //用户头像
			newstime: '2021-6-4 15:30', //更新时间
			isFllow: true, //关注
			title: '我是标题', //标题
			titlepic: '/static/logo.png', //封面
			//点赞和踩
			support: {
				type: '', //未操作
				support_count: 1, //点赞人数
				unsupport_count: 2 //踩的人数
			},
			comment_count: 2, //评论
			share_num: 2 //分享
		}
	]

	export default {
		data() {
			return {
				scrollH: 500,
				tabIndex: 0, //默认选中
				tabBars: [{
					name: '推荐'
				}, {
					name: '关注'
				}],
				hotCate: [{
					name: '关注'
				}, {
					name: '推荐'
				}, {
					name: '体育'
				}, {
					name: '热点'
				}, {
					name: '财经'
				}, {
					name: '娱乐'
				}],
				topicList: [{
						cover: '/static/demo/topicpic/1.jpeg',
						name: '话题名称',
						desc: '话题描述',
						news_count: '10',
						today_count: '10'
					},
					{
						cover: '/static/demo/topicpic/1.jpeg',
						name: '话题名称哈哈哈哈',
						desc: '话题描述',
						news_count: '10',
						today_count: '10'
					},
					{
						cover: '/static/demo/topicpic/1.jpeg',
						name: '话题名称',
						desc: '话题描述',
						news_count: '10',
						today_count: '10'
					}
				],
				list: [], //数据列表
				moreLoad: '上拉加载更多'
			}
		},
		components: {
			uniNavBar,
			commonList,
			loadMore,
			hotCate,
			topicList
		},
		//加载页面时
		onLoad() {
			// 获取高度
			//异步获取
			let res = uni.getSystemInfo({
				success: (res) => {
					console.log(res); //打印全部设备信息
					// 页面高度 = 页面视图高度-状态栏高度-导航栏高度
					this.scrollH = res.screenHeight - res.statusBarHeight - 44
				}
			})
			//生成数据列表
			this.list = demo
		},
		methods: {
			// 上拉加载更多
			moreLoadEvent() {
				// 验证当前是否处于可在状态
				if (this.moreLoad !== '上拉加载更多') return
				// 设置加载状态
				this.moreLoad = '加载中...'
				// 摸你请求数据
				setTimeout(() => {
					// 加载数据  ====  把原有数据复制一份
					this.list = [...this.list, ...this.list]
					// 设置加载状态
					this.moreLoad = '上拉加载更多'
				}, 2000)
			},
			//顶踩操作
			doSupport(e) {
				console.log(e)
				// 如果是顶了就不能再次顶,已经踩了就不能再次踩,如果是没操作就可以进行顶踩操作
				// let item = this.list[e.index];
				let item = this.list[e.index];
				let msg = e.type === 'support' ? '顶' : '踩';
				/* 用户未进行操作 */
				if (item.support.type === '') {
					//拼接字符串
					item.support[e.type + '_count']++;
					console.log(e.type);
				} else if (item.support.type === 'support' && e.type === 'unsupport') {
					// 顶-1
					item.support.support_count--;
					// 踩+1
					item.support.unsupport_count++;
				} else if (item.support.type === 'unsupport' && e.type === 'support') {
					// 顶+1
					item.support.support_count++;
					// 踩－1
					item.support.unsupport_count--;
				}
				item.support.type = e.type;
				// 消息提示
				uni.showToast({
					title: msg + '成功'
				})
			},
			// 监听滑动事件
			swipper(e) {
				// 滑动的索引
				console.log('滑动', e.detail.current)
				this.tabIndex = e.detail.current
			},
			//点击跳转发布页面,@clickRight监听
			openEdit() {
				console.log(111);
				uni.navigateTo({
					url: '../add-input/add-input'
				})
			},
			//切换按钮
			changeTap(index) {
				this.tabIndex = index
			}
		}
	}
</script>

<style>
</style>
